<template>

  <!-- 封装数字组件, 需要引入mui的js对其进行初始化 -->
  <div class="mui-numbox" data-numbox-min='1' :data-numbox-max='max'>
    <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
    <input class="mui-input-numbox" value="1" @change="count" ref="numBox" />
    <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
  </div>

</template>

<script>
/** 导入mui **/
import mui from "../../../lib/mui/js/mui.min.js"

export default {
  data(){
    return {}
  },
  mounted() {
    /** 初始化组件 **/
    mui(".mui-numbox").numbox();
  },
  methods: {
    /** 获取输入框中的数值, 然后通过$emit组件传值给父组件 **/
    count(){
      this.$emit('func', this.$refs.numBox.value);
    }
  },
  props: ['max'],
  /** 使用watch属性进行监听虚拟数值(max)的变化, 同步到页面数据中 **/
  watch: {
    max: function(newData, oldData){
      /* 获取到的最新数据肯定是有效数据, 将数据进行改变 */

      /* 使用 JS API 来进行最大值的设置 */
      mui(".mui-numbox").numbox().setOption('max',newData);
    }
  }
}
</script>

<style lang="scss" scoped>

</style>